<script setup>
import {ref, onMounted} from "vue";
import {usePcKeyStore} from "@/stores/pckey.js";
import opMapJson from "@/assets/opMap.json";
import keyMapJson from "@/assets/keyMap.json"
import keySelect from "@/assets/keySelect.json"

//pinia仓库
const pcKeyStore = usePcKeyStore();
//操作映射表
const general = opMapJson.other.general;
//键鼠映射表
const keyMap = keyMapJson.keys;
//表单数据
const formData = ref([
  {
    op: "",
    name: "",
    key: ""
  }
]);
//初始化表单数据
const op2key = () => {
  for (let i = 0; i < general.length; i++) {
    general[i].key = pcKeyStore.getOp2key[general[i].op];
  }
  formData.value = general;
}
//启动钩子
onMounted(
    () => {
      op2key();
    }
)
//获取按键名称
const getKeyName = (code) => {
  for (let i = 0; i < keyMap.length; i++) {
    if (keyMap[i].code === code) {
      return keyMap[i].name;
    }
  }
}
//弹窗
const dialogVisible = ref(false);
//要修改的按键
const formDateItem = ref({
  op: "",
  key: "",
  name: ""
})
//点击按钮打开弹窗并传值
const openDialog = (item) => {
  formDateItem.value = item;
  dialogVisible.value = true;
}
//旧按键
const oldKey = ref(undefined);
//传入新值
const newKey = () => {
  //删除旧按键->事件组中要更新的事件
  if (pcKeyStore.getKey2op[oldKey] !== undefined) {
    pcKeyStore.getKey2op[oldKey] = pcKeyStore.getKey2op[oldKey].filter(item => item !== formDateItem.value.op)
  }
  //在新按键->事件组中添加事件
  if (formDateItem.value.key !== "") {
    if (pcKeyStore.getKey2op[formDateItem.value.key] === undefined){
      pcKeyStore.getKey2op[formDateItem.value.key] = [];
    }
    pcKeyStore.getKey2op[formDateItem.value.key].push(formDateItem.value.op)
  }
  //修改事件->按键组的数据
  pcKeyStore.getOp2key[formDateItem.value.op] = formDateItem.value.key;
  dialogVisible.value = false;
  // 清空表单数据
  formDateItem.value = ref({
    op: "",
    key: "",
    name: "",
  })
}

</script>

<template>
  <el-form>
    <el-form-item v-for="item in formData" class="form01"
                  label-position="right" label-width="16rem">
      <template #label>
        <div class="div01">{{ item.name }}</div>
      </template>
      <el-button class="button01" type="primary" @click="openDialog(item)">
        {{ getKeyName(item.key) || "无按键或组合键" }}
      </el-button>
    </el-form-item>
  </el-form>

  <el-dialog v-model="dialogVisible" title="键位选择器">
    <el-radio-group v-model="formDateItem.key" size="large">
      <div class="div02">
        <el-radio-button v-for="item in keySelect.key1" :key="item.code" :label="item.name" :value="item.code"
                         class="button02"/>
      </div>
      <div class="div02">
        <el-radio-button v-for="item in keySelect.key2" :key="item.code" :label="item.name" :value="item.code"
                         class="button02"/>
      </div>
      <div class="div02">
        <el-radio-button v-for="item in keySelect.key3" :key="item.code" :label="item.name" :value="item.code"
                         class="button02"/>
      </div>
      <div class="div02">
        <el-radio-button v-for="item in keySelect.key4" :key="item.code" :label="item.name" :value="item.code"
                         class="button02"/>
      </div>
      <div class="div02">
        <el-radio-button v-for="item in keySelect.key5" :key="item.code" :label="item.name" :value="item.code"
                         class="button02"/>
      </div>
      <div class="div02">
        <el-radio-button v-for="item in keySelect.key6" :key="item.code" :label="item.name" :value="item.code"
                         class="button02"/>
      </div>
      <div class="div02">
        <el-radio-button v-for="item in keySelect.key7" :key="item.code" :label="item.name" :value="item.code"
                         class="button02"/>
      </div>
    </el-radio-group>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="newKey">确定</el-button>
    </template>
  </el-dialog>

</template>

<style scoped>
.form01 {
  display: inline-flex;
  width: 50%;
}

.div01 {
  font-size: 1.2rem;
  font-weight: bold;
}

.div02 {
  display: flex;
  margin-top: 1em;
  justify-content: center;
}

.button01 {
  width: 10rem;
  font-size: 1.2rem;
}

.button02 {
  margin-bottom: 0.5rem;
}


</style>